// 将要轮播的页面类名设为img
(function(){
    var item=document.getElementsByClassName("item");
    var next=document.getElementById("next");
    var prev=document.getElementById("prev");
    var slider=document.getElementsByClassName("slider")[0];
    var num=0;
    var rotate=0;
    function rotation(reg){
        reg?reg=reg:reg=0;
        for(var i=0; i<item.length; i++){
            var imgs=item[i].getElementsByClassName("img"); 
            var degs=360/imgs.length;
            for(var j=0 ; j<imgs.length ; j++){
                //rotate=10+i*72;
            rotate=(reg+j)*(degs);
            //imgs[i].style.transform=("rotateY("+rotate+"deg) translateZ(440px)");
            imgs[j].style.transform=("rotateX(0deg) rotateY("+rotate+"deg) translateZ(440px)");
            };
        };
    }
    rotation();
    next.onclick=function(){
        num--;
        index++;
        if(index>5){
            index=1;
        };
        span(index);
        rotation(num);
    }
    prev.onclick=function(){
        num++;
        index--;
        if(index<1){
            index=5;
        };
        span(index);
        rotation(num);
    }
    var timer;
    function play(){
        timer=setInterval(function(){
            next.onclick();
            console.log(index);
            console.log(num);
        },4000);
    }
    play();
    function stop(){
        clearInterval(timer);
    }
    slider.onmouseover=stop;
    slider.onmouseout=play;
    var spans=document.getElementsByTagName("span");
    var index=1;
    function span(index){
        for(var i=0 ; i<spans.length ; i++){
            if(spans[i].className == "on"){
                spans[i].className="";
            };
        };
        spans[index-1].className="on";
    }
    for(var i=0 ; i<spans.length ; i++){
        spans[i].onclick=function(){
            index = parseInt(this.getAttribute("index"));
            rotation(1-index);
            span(index);
        };
    };
})();